<template>
  <div ref="chart" style="height: 600px"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
const chart = ref();
const option = reactive({
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  legend: {
    data: ["销量"],
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    axisLabel: {
      rotate: 0, //x轴下字体倾斜程度
      interval: 0, //中间隔几个显示
      formatter: (value) => value.split("").join("\n"),
    },
  },
  yAxis: {
    axisLine: {
      lineStyle: {
        color: "red",
      },
    },
    axisLabel: {
      formatter: (value, index) => {
        return index % 2 == 0 ? value + "件" : value;
      },
    },
  },
  grid: {
    containLabel: true,
    left: "2%",
    right: "2%",
    // bottom: "12%",
  },
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
      label: {
        show: true,
        position: "top",
      },
    },
  ],
});

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(chart.value);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>

<style>
</style>